import { create as defineStore } from "zustand"
import { immer } from "zustand/middleware/immer"

import ButtonDev from "../materials/Button/dev"
import ButtonProd from "../materials/Button/prod"
import ModalDev from "../materials/Modal/dev"
import ModalProd from "../materials/Modal/prod"
import TableDev from "../materials/Table/dev"
import TableProd from "../materials/Table/prod"
import TableColumnDev from "../materials/TableColumn/dev"
import TableColumnProd from "../materials/TableColumn/prod"
import FormDev from "../materials/Form/dev"
import FormProd from "../materials/Form/prod"
import FormItemDev from "../materials/FormItem/dev"
import FormItemProd from "../materials/FormItem/prod"
import ContainerDev from "../materials/Container/dev"
import ContainerProd from "../materials/Container/prod"
import PageDev from "../materials/Page/dev"
import PageProd from "../materials/Page/prod"

// 定义渲染的表单组件需要的属性
export interface ComponentSetter {
    name: string
    label: string
    type: string // 组件的类型
    options?: any[] // 组件的选项
} 

export interface ComponentEvent {
    name: string
    label: string
}

export interface ComponentMethod{
    name: string
    label: string
}

export interface ComponentConfig {
    name: string
    defaultProps: Record<string, any>
    desc: string
    setter?: ComponentSetter[] // 组件的属性表单配置
    stylesSetter?: ComponentSetter[] // 组件的样式表单配置
    events?: ComponentEvent[] // 组件的事件配置
    methods?: ComponentMethod[] // 组件的方法配置
    dev: any // 编辑组件
    prod: any // 预览组件
}

interface State {
    componentConfigs: Record<string, ComponentConfig>,
}

interface Action {
    registerComponent: (name: string, componentConfig: ComponentConfig) => void,
}

// componentConfigs 用来做组件映射和配置默认值
export const useComponentConfigStore = defineStore<State & Action>()(immer((set, get) => ({
    componentConfigs: {
        Container: {
            name: "Container",
            desc: "容器",
            defaultProps: {},
            dev: ContainerDev,
            prod: ContainerProd,
        },
        Page: {
            name: "Page",
            desc: "页面",
            defaultProps: {},
            dev: PageDev,
            prod: PageProd
        },
        Button: {
            name: "Button",
            desc: "按钮",
            defaultProps: {
                type: "primary",
                text: "button",
            },
            dev: ButtonDev,
            prod: ButtonProd,
            setter: [
                {
                    name: 'type', // 值对应 defaultProps 中的 type
                    label: '按钮类型',
                    type: 'select',
                    options: [
                      {label: '主按钮', value: 'primary'},
                      {label: '次按钮', value: 'link'},
                    ],
                },
                {
                name: 'text', // 值对应 defaultProps 中的 text
                label: '内容',
                type: 'input',
                }
            ],
            stylesSetter: [
                {
                    name: 'width', // 值对应 defaultProps 中的 color
                    label: '宽度',
                    type: 'inputNumber',
                },
                {
                    name: 'height', // 值对应 defaultProps 中的 fontSize
                    label: '高度',
                    type: 'inputNumber',
                }
            ],
            events: [
                {
                    name: 'onClick',
                    label: '点击事件'
                },
                {
                    name: 'onDoublelClick',
                    label: '双击事件'
                }
            ]
        },
        Modal: {
            name: "Modal",
            desc: "弹窗",
            defaultProps: {
                title: "弹窗"
            },
            setter: [
                {
                    name: 'title', // 值对应 defaultProps 中的 title
                    label: '标题',
                    type: 'input',
                }
            ],
            stylesSetter:[],
            events: [
                {
                    name: 'onOk',
                    label: '确认事件'
                },
                {
                    name: 'onCancel',
                    label: '取消事件'
                }
            ],
            methods: [
                {
                    name: 'open',
                    label: '打开弹窗'
                },
                {
                    name: 'close',
                    label: '关闭弹窗'
                }
            ],
            dev: ModalDev,
            prod: ModalProd
        },
        Table: {
            name: "Table",
            desc: "表格",
            defaultProps: {},
            setter: [
                {
                    name: "url",
                    label: "url",
                    type: "input",
                }
            ],
            dev: TableDev,
            prod: TableProd
        },
        TableColumn: {
            name: 'TableColumn',
            desc: '表格列',
            defaultProps: {
                dataIndex:`col_${new Date().getTime()}`,
                title: '列名'
            },
            setter: [
                {
                  name: 'type',
                  label: '类型',
                  type: 'select',
                  options: [
                    {
                      label: '文本',
                      value: 'text',
                    },
                    {
                      label: '日期',
                      value: 'date',
                    },
                  ],
                },
                {
                  name: 'title',
                  label: '标题',
                  type: 'input',
                },
                {
                  name: 'dataIndex',
                  label: '字段名',
                  type: 'input',
                },
              ],
            dev: TableColumnDev,
            prod: TableColumnProd,
        },
        Form: {
            name: "Form",
            desc: "表单",
            defaultProps: {},
            setter: [
                {
                    name: 'title',
                    label: '标题',
                    type: 'input',
                },
            ],
            events: [
                {
                    name: 'onFinish',
                    label: '提交事件'
                }
            ],
            methods: [
                {
                    name: 'submit',
                    label: '提交表单',
                }
            ],
            dev: FormDev,
            prod: FormProd
        },
        FormItem: {
            name: 'FormItem',
            desc: '表单项',
            defaultProps: {
                name: new Date().getTime(),
                label: '姓名'
            },
            dev: FormItemDev,
            prod: FormItemProd,
            setter: [
              {
                name: 'type',
                label: '类型',
                type: 'select',
                options: [
                  {
                    label: '文本',
                    value: 'input',
                  },
                  {
                    label: '日期',
                    value: 'date',
                  },
                ],
              },
              {
                name: 'label',
                label: '标题',
                type: 'input',
              },
              {
                name: 'name',
                label: '字段',
                type: 'input',
              },
              {
                name: 'rules',
                label: '校验',
                type: 'select',
                options: [
                  {
                    label: '必填',
                    value: 'required',
                  },
                ],
              }
            ]
        },
    },
    registerComponent: (name, componentConfig) => set((state) => {
        state.componentConfigs[name] = componentConfig
    })
})))